<template>
  <el-empty v-if="collections == null" description="收藏为空" />

  <div class="product-list">
    <div class="product-item" v-for="(collection, index) in collections">
      <div class="product-detail">
        <Collection
          :key="index"
          :collection="collection"
          @click="navigateToProduct(collection.id)"
          class="custom-collection"
        />
        <div class="btn">
          <el-button @click="cancel(collection.id)">移除收藏</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Collection from "@/components/CollectionThing.vue";

import {
  getAllCollections,
  collectDeleteByThingId,
} from "@/apis/user/collection";
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

// 数据
const collections = ref([]);

// 获取数据
const getPage = async () => {
  try {
    const result = await getAllCollections();
    if (result != undefined) {
      collections.value = result.data;
      console.log(result.data);
    }
  } catch (error) {
    console.error(error);
  }
};

// 页面加载时执行
onMounted(async () => {
  await getPage();
});

// 取消收藏
const cancel = async (id) => {
  try {
    await collectDeleteByThingId(id);
    getPage();
  } catch (error) {
    console.error(error);
  }
  // console.log(id);
};

const navigateToProduct = (productId) => {
  router.push(`/productdetail/${productId}`);
};
</script>

<style lang="less" scoped>
.product-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.product-item {
  border-radius: 5px;
  text-align: center;
  width: 200px; 

  .product-detail {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 16px;
    margin: 16px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 100%; 
    transition: transform 0.2s ease-in-out;
  }

  .product-detail:hover {
    transform: translateY(-5px);
  }
}

.btn {
  margin-top: 16px;
}

.el-button {
  background-color: #f44336;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
}

.el-button:hover {
  background-color: #d32f2f;
}

.custom-collection {
  display: inline;
}
</style>
